import React from "react"
import { Image, View } from "@tarojs/components"
import clsx from "clsx"
import styles from "./index.module.scss"
import { handleBlockNavigation } from "@/utils/app"

const mockSrc = process.env.__MOCK_SRC__
type IProps = {
  className?: string
  flowModule?: {
    id: number
    remark: string
    title: string
    displayName: string
    description: string
    image: string
    /** 是否不显示备注 */
    isHide: boolean
  } & Parameters<typeof handleBlockNavigation>["0"]
}
const def: any = {
  remark: "模块备注",
  title: "模块标题",
  displayName: "入口名称",
  description: "模块描述",
  image: mockSrc
}
/**
 * @component 引流模块
 */
export default function GpFlowModule({ className, flowModule = def }: IProps) {
  const style: React.CSSProperties = {}
  if (flowModule.isHide) {
    style.marginTop = 0
  }
  return (
    <View
      className={clsx(styles.flowModule, className)}
      onClick={() =>
        handleBlockNavigation({
          jumpPageId: flowModule.jumpPageId,
          jumpPageType: flowModule.jumpPageType,
          jumpType: flowModule.jumpType,
          jumpUrl: flowModule.jumpUrl
        })
      }
    >
      {!flowModule.isHide && <View className={styles.flowModuleRemark}>{flowModule.remark}</View>}
      <View className={styles.flowModuleContent} style={style}>
        {flowModule.image && <Image className={styles.flowModuleImage} src={flowModule.image} />}
        <View className={styles.flowModuleInfo}>
          <View className={styles.flowModuleTitle}>{flowModule.title}</View>
          <View className={styles.flowModuleDesc}>{flowModule.description}</View>
        </View>
        <View className={styles.flowModuleDisplayName}>{flowModule.displayName}</View>
      </View>
    </View>
  )
}
